<script setup>
const props = defineProps({
  type: {
    type: String,
    default: 'news',
    validator: (val) => {
      return ['news', 'activity'].includes(val)
    },
  },
  info: {
    type: Object,
    default: () => {},
  },
  needBorder: {
    type: Boolean,
    default: true,
  },
})
</script>

<template>
  <view v-if="type === 'news'" class="list-item" :class="{ 'is-border': needBorder }">
    <view class="mr-24rpx">
      <image class="list-item-img" src="@/static/logo.png" />
    </view>
    <view class="flex flex-col justify-between">
      <view class="list-item-title ellipsis-2">活动名称</view>
      <view class="list-item-desc">活动时间</view>
    </view>
  </view>
  <view v-if="type === 'activity'" class="list-item" :class="{ 'is-border': needBorder }">
    <view class="mr-24rpx relative">
      <image class="list-item-img" src="@/static/logo.png" />
      <view class="list-item-badge">已完成</view>
    </view>
    <view class="flex flex-col justify-between">
      <view class="list-item-title ellipsis-2">活动名阿萨德发生的发烧地方阿萨德发称</view>
      <view class="list-item-desc ellipsis">活动时间：</view>
      <view class="list-item-desc ellipsis">活动礼堂：</view>
    </view>
  </view>
</template>

<style lang="scss" scoped>
.list-item {
  display: flex;
  padding: 32rpx 0;

  &.is-border {
    border-bottom: 1rpx solid #eee;
  }

  &-img {
    width: 200rpx;
    height: 160rpx;
    border-radius: 16rpx;
  }

  &-badge {
    position: absolute;
    top: 0;
    right: 0;
    width: 88rpx;
    height: 36rpx;
    font-size: 24rpx;
    line-height: 36rpx;
    color: #fff;
    text-align: center;
    border-radius: 0 16rpx;
  }

  &-title {
    font-size: 28rpx;
    font-weight: 500;
    color: $uni-text-color;
  }

  &-desc {
    font-size: 24rpx;
    color: $uni-text-color-grey;
  }
}
</style>
